<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择优惠券</view>
            <view class="-mt-[20rpx]">
                <u-tabs :list="tabs" @click="switchTab" :current="current"
                    itemStyle="width:50%;height:88rpx;box-sizing: border-box; font-size: 28rpx;" :activeStyle="{
                        color: 'var(--primary-color)'
                    }" lineColor="var(--primary-color)"></u-tabs>
            </view>
            <scroll-view scroll-y="true" class="h-[50vh] pt-[10rpx]">
                <view class="px-[var(--popup-sidebar-m)] pb-[30rpx] pt-0 text-sm" v-show="current == 0">
                    <view
                        class="mt-[var(--top-m)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] border-1 border-[#eee] border-solid rounded-[20rpx]"
                        :class="{ '!border-[var(--primary-color)] bg-[var(--primary-color-light2)]': coupon && coupon.couponId == item.couponId }"
                        v-for="item in couponList" @click="selectCoupon(item)">
                        <view class="flex border-0 !border-b border-[#eee] border-dashed pb-[20rpx]"
                            :class="{ '!border-[var(--primary-color)]': coupon && coupon.couponId == item.couponId }">
                            <view class="flex-1 w-0">
                                <view class="text-[30rpx] mb-[20rpx] font-500">{{ item.couponName }}</view>
                                <view class="text-[24rpx] text-[var(--text-color-light6)]">

                                    <text
                                        class="w-[80rpx] text-center bg-[#FFEFF0] whitespace-nowrap text-[var(--primary-color)] text-[24rpx] h-[30rpx] leading-[30rpx] rounded-[16rpx] mr-[10rpx] flex-shrink-0">{{
                                            item.discountType === 1 ? '满减券' : '折扣券' }}</text>
                                    <text v-if="item.usePrice === '0.00'">无门槛</text>
                                    <text v-else>满{{ fen2yuan(item.usePrice) }}元可用</text>
                                </view>
                            </view>
                            <view class="text-[36rpx] price-font" v-if="item.discountType === 1"><text
                                    class="text-xs mr-[2rpx]">￥</text>{{
                                        fen2yuan(item.discountPrice)
                                    }}</view>
                            <view class="text-[36rpx] price-font" v-if="item.discountType === 2">{{
                                item.discountPercent / 10.0
                                }} <text class="text-xs ml-[2rpx]">折</text></view>
                        </view>
                        <view class="pt-[20rpx] text-[24rpx] text-[var(--text-color-light6)]"
                            v-if="item.validityType === 2">领取后 {{ item.fixedEndTerm }} 天内可用有效</view>
                        <view class="pt-[20rpx] text-[24rpx] text-[var(--text-color-light6)]" v-else>{{
                            timeFormat(item.validStartTime, 'yyyy-mm-dd') }}
                            ~
                            {{ timeFormat(item.validEndTime, 'yyyy-mm-dd') }}有效</view>
                    </view>
                </view>
                <view class="px-[var(--popup-sidebar-m)] pb-[30rpx] pt-0 text-sm" v-show="current == 1">
                    <view
                        class="mt-[var(--top-m)] px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] border-1 !border-[#eee] border-solid rounded-[var(--rounded-mid)] bg-[var(--temp-bg)]"
                        v-for="item in disabledCouponList">
                        <view class="flex border-0 !border-b !border-[#ddd] border-dashed pb-[20rpx]">
                            <view class="flex-1 w-0">
                                <view class="text-[30rpx] mb-[20rpx] font-500">{{ item.couponName }}</view>
                                <view class="text-[24rpx] text-[var(--text-color-light6)]">满￥{{
                                    fen2yuan(item.usePrice) }}可用</view>
                                <!-- <view class="text-[24rpx] text-[var(--text-color-light9)]" v-else>无门槛券</view> -->
                            </view>
                            <view class="text-[36rpx] price-font" v-if="item.discountType === 1"><text
                                    class="text-xs mr-[2rpx]">￥</text>{{
                                        fen2yuan(item.discountPrice)
                                    }}</view>
                            <view class="text-[36rpx] price-font" v-if="item.discountType === 2">{{
                                item.discountPercent / 10.0
                                }} <text class="text-xs ml-[2rpx]">折</text></view>
                        </view>
                        <view class="pt-[20rpx] text-[24rpx] text-[var(--text-color-light6)]"
                            v-if="item.validityType === 2">领取后 {{ item.fixedEndTerm }} 天内可用有效</view>
                        <view class="pt-[20rpx] text-[24rpx] text-[var(--text-color-light6)]" v-else>{{
                            timeFormat(item.validStartTime, 'yyyy-mm-dd') }}
                            ~
                            {{ timeFormat(item.validEndTime, 'yyyy-mm-dd') }}有效</view>
                        <view class="text-[24rpx] pt-[10rpx] flex  text-[var(--text-color-light9)]">
                            不可用原因：{{ item.mismatchReason }}
                        </view>
                    </view>
                </view>
            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" @click="confirm">确认</button>
            </view>
        </view>
    </u-popup>
</template>

<script setup lang="ts">
import { fen2yuan, timeFormat, formatCouponProductScope } from '@/utils/formatting'
import { ref, watch, computed } from 'vue'

const prop = defineProps({
    orderKey: {
        type: String,
        default: ''
    },
    coupons: {
        type: Array,
        default: []
    }

})

const current = ref(0)
const couponList = ref<object[]>([])
const disabledCouponList = ref<object[]>([])
const show = ref(false)
const coupon = ref<null | object>(null)
const emits = defineEmits(['confirm'])

watch(() => prop.coupons, () => {
    if (prop.coupons && !couponList.value.length) {
        let data = prop.coupons
        console.log(data)

        const list = [], disabled = []

        if (data.length) {
            data.forEach(item => {
                item.match ? list.push(item) : disabled.push(item)
            })
        }

        disabledCouponList.value = disabled
        couponList.value = list
        if (list.length) {
            coupon.value = list[0]
            emits('confirm', coupon.value)
        }
    }
}, { immediate: true })

const tabs = computed(() => {
    return [
        { name: `可用优惠券(${couponList.value.length})`, key: 'normal' },
        { name: `不可用优惠券(${disabledCouponList.value.length})`, key: 'disabled' }
    ]
})

const switchTab = (event: any) => {
    current.value = event.index
}

const open = (coupon_id: any) => {
    show.value = true
    if (coupon_id) {
        for (let i = 0; i < couponList.value.length; i++) {
            if (couponList.value[i].couponId == coupon_id) {
                coupon.value = couponList.value[i];
                break;
            }
        }
    }
}

const selectCoupon = (data: object) => {
    if (coupon.value) {
        coupon.value = coupon.value.couponId != data.couponId ? data : null
    } else {
        coupon.value = data
    }
}

const confirm = () => {
    emits('confirm', coupon.value)
    show.value = false
}

defineExpose({
    open,
    couponList
})
</script>

<style lang="scss" scoped></style>
